<template>
    <div>
        <div class="headstyle">
            <el-row :gutter="24">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                <span class="locsty"><i class="el-icon-location iconsty"></i>当前位置：导师账号管理</span>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple">
                    <el-input  v-model="te_name" placeholder="请输入导师工号" clearable class="selectsty"></el-input>
                    <el-select v-model="authflag" placeholder="请选择导师权限" class="selectsty">
                      <el-option label="全部" value="-1"></el-option>
                      <el-option label="普通权限导师" value="0"></el-option>
                      <el-option label="所有权限导师" value="1"></el-option>
                    </el-select>
                    <el-button type="primary" @click="selectTeacher">查询</el-button>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-button type="primary" @click="goTo('/editteacherinfo')">新增导师</el-button>
                    <el-button type="primary" @click="goinsert">批量导入</el-button>
                    <el-button type="danger" @click="godelet" >批量删除</el-button>
                     <el-button type="danger" @click="godeletupdete" >批量修改</el-button>
                </div>
            </el-col>
            </el-row>
        </div>
        <div class="contentstyle">
             <el-table ref="multipleTable"  :data="tableData.filter(data=>total!=0)"  
                 tooltip-effect="dark" 
                 style="width: 100%;text-align:center"
                 border @selection-change="handleSelectionChange">
                <el-table-column type="selection"  width="55" align="center"></el-table-column>
                <el-table-column  prop="te_number" label="导师工号" show-overflow-tooltip align="center"> </el-table-column>
                <el-table-column  prop="te_name" label="导师姓名" show-overflow-tooltip align="center"> </el-table-column>
                <el-table-column  prop="te_depart" label="导师部门" show-overflow-tooltip align="center"> </el-table-column>
                <el-table-column  prop="te_kind" label="一级业务维度" show-overflow-tooltip align="center"> </el-table-column>
                <el-table-column  prop="te_auth" label="课程查看权限" show-overflow-tooltip align="center"> </el-table-column>
                <el-table-column  prop="date" label="创建日期" show-overflow-tooltip align="center"> </el-table-column>               
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                       <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                       <el-button  size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    v-if = "paginationShow"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </div>
        <div class="bulitContent" v-show="isinput">
            <div class="bulitBg"></div>
                <div class="bulitContentDetail">
                    <p class="bulitTitle">
                        <span><b>批量导入操作</b></span>
                    <i class="el-icon-close" @click="insertend"></i>                   
                    </p>
                    <div class="tableContent">
                        <table border="1" cellspacing="0" id="tablist">
                            <tr>
                                <td width="80" class="right">模板：</td>
                                <td>                                  
                                    <a href="../../../static/教师信息模板.xlsx" download="教师信息模板.xlsx" style="width: 180px;">点击下载教师信息模板</a>
                                    <span style="color: Red">（数据格式请按照模板整理）</span></td>
                            </tr>
                            <tr>
                                <td class="right">上传数据：</td>
                                <td>
                                   <el-upload
                                      class="upload-demo"
                                      ref="uploadinsert"
                                      action="/Teacher"
                                      :http-request="uploadInsertSectionFile"
                                      accept=".xlsx, .xls"
                                      :auto-upload="false"
                                      :limit="1"
                                    >
                                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                      <el-button
                                        style="margin-left: 50px;"
                                        size="small"
                                        type="success"
                                        @click="submitInsertUpload"
                                      >导入导师信息</el-button>                                     
                                    </el-upload>                       
                                </td>
                            </tr>
                            <tr>
                                <td class="right">状态：</td>
                                <td>
                                    <span id="lbStateinsert">等待上传……</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="right"></td>
                                <td>
                                    <span id="lbErrorinsert" style="color: Red;"></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="right">操作说明：
                                </td>
                                <td>1、需要导入的Excel数据请按照模板格式整理；<br>
                                    2、Excel文档支持Excel2003、2007、2010多种版本;<br>
                                    3、批量导入时默认的初始密码是JH123456
                                </td>
                            </tr>
                            <tr>
                                <td class="right">&nbsp;</td>
                                <td></td>
                            </tr>
                        </table>
                </div>
            </div>
        </div>
        <div class="bulitContent" v-show="isdelete">
            <div class="bulitBg"></div>
                <div class="bulitContentDetail">
                    <p class="bulitTitle">
                        <span><b>批量删除操作</b></span>
                    <i class="el-icon-close" @click="deleteend"></i>                   
                    </p>
                    <div class="tableContent">
                        <table border="1" cellspacing="0" id="tablist">
                            <tr>
                                <td width="80" class="right">模板：</td>
                                <td>
                                    <a href="../../../static/批量删除模板.xlsx" download="批量删除模板.xlsx" style="width: 180px;">点击下载批量模板</a>
                                    <span style="color: Red">（数据格式请按照模板整理）</span></td>
                            </tr>
                            <tr>
                                <td class="right">上传数据：</td>
                                <td>
                                    <el-upload
                                      class="upload-demo"
                                      ref="uploadDelete"
                                      action="/Interact"
                                      :http-request="uploadDeleteSectionFile"
                                      accept=".xlsx, .xls"
                                      :auto-upload="false"
                                    >
                                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                      <el-button
                                        style="margin-left: 50px;"
                                        size="small"
                                        type="success"
                                        @click="submitDeleteUpload"
                                      >删除导入导师</el-button>                                     
                                    </el-upload>                      
                                </td>
                            </tr>
                            <tr>
                                <td class="right">状态：</td>
                                <td>
                                    <span id="lbStateinsert">等待上传……</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="right"></td>
                                <td>
                                    <span id="lbErrorinsert" style="color: Red;"></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="right">操作说明：
                                </td>
                                <td>1、需要导入的Excel数据请按照模板格式整理；<br>
                                    2、Excel文档支持Excel97、2003、2007、2010多种版本；
                                </td>
                            </tr>
                            <tr>
                                <td class="right">&nbsp;</td>
                                <td></td>
                            </tr>
                        </table>
                </div>
         </div>
        </div>
        <div class="bulitContent" v-show="isupdate">
            <div class="bulitBg"></div>
                <div class="bulitContentDetail">
                    <p class="bulitTitle">
                        <span><b>批量更新操作</b></span>
                    <i class="el-icon-close" @click="updateend"></i>                   
                    </p>
                    <div class="tableContent">
                        <table border="1" cellspacing="0" id="tablist">
                            <tr>
                                <td width="80" class="right">模板：</td>
                                <td>
                                    <a href="../../../static/导师批量信息变更模板.xlsx" download="导师批量信息变更模板.xlsx" style="width: 180px;">点击下载批量模板</a>
                                    <span style="color: Red">（数据格式请按照模板整理）</span></td>
                            </tr>
                            <tr>
                                <td class="right">上传数据：</td>
                                <td>
                                    <el-upload
                                      class="upload-demo"
                                      ref="uploadUpdate"
                                      action="/update"
                                      :http-request="uploadupdateSectionFile"
                                      accept=".xlsx, .xls"
                                      :auto-upload="false"
                                    >
                                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                      <el-button
                                        style="margin-left: 50px;"
                                        size="small"
                                        type="success"
                                        @click="submitupdateUpload"
                                      >更新导师数据</el-button>                                     
                                    </el-upload>                      
                                </td>
                            </tr>
                            <tr>
                                <td class="right">状态：</td>
                                <td>
                                    <span id="lbStateinsert">等待上传……</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="right"></td>
                                <td>
                                    <span id="lbErrorinsert" style="color: Red;"></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="right">操作说明：
                                </td>
                                <td>1、需要导入的Excel数据请按照模板格式整理；<br>
                                    2、Excel文档支持Excel97、2003、2007、2010多种版本；
                                </td>
                            </tr>
                            <tr>
                                <td class="right">&nbsp;</td>
                                <td></td>
                            </tr>
                        </table>
                 </div>
           </div>
        </div>


    </div>
</template>

<script>
export default {
  data() {
    return {
      //模板下载路径
      te_name: "",
      authflag: "",
      pageSize: 10, // 页容量
      currentPage: 1, // 当前页
      total: 0, // 数据的总条数
      paginationShow: true, // 控制分页的显示隐藏达到刷新的效果
      sels: [], //选中显示的值
      disabled: true,
      //课程数据
      tableData: [
        {
          te_id: "",
          te_number: "",
          te_name: "",
          te_auth: "",
          te_depart: "",
          te_kind: "",
          date: "",
          te_psw: ""
        }
      ],
      isinput: false,
      isdelete: false,
      isupdate:false,
    };
  },
  //页面初次加载
  mounted: function() {
    this.selectTeacher();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.sels = val;
    },
    //点击链接跳转
    goTo(path) {
      this.$router.replace(path);
    },

    // 当页容量发生变化时触发
    sizeChange(size) {
      this.pageSize = size;
      // 重新请求数据
      this.selectTeacher();
    },
    // 当页数发生变化时触发
    currentChange(num) {
      this.currentPage = num;
      // 重新请求数据
      this.selectTeacher();
    },
    // 查询方法
    searchClicks() {
      this.paginationShow = false;
      this.currentChange(1);
      this.$nextTick(() => {
        this.paginationShow = true;
        this.selectTeacher();
      });
    },
    //数据列表查询方法
    selectTeacher() {
      var flag;
      if (this.authflag == "") {
        flag = -1;
      } else {
        flag = this.authflag;
      }
      this.$axios
        .get("/Teacher", {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            te_name: this.te_name,
            isadmin: 0,
            flag: flag
          }
        })
        .then(json => {
          var teacherlist = JSON.parse(json.data.teacherlist);
          this.total = json.data.totalpage;
          var telistdata = [];
          for (let i = 0; i < teacherlist.length; i++) {
            var item = {
              te_id: teacherlist[i].Te_id,
              te_number: teacherlist[i].Te_number,
              te_name: teacherlist[i].Te_name,
              te_depart: teacherlist[i].Te_depart,
              te_kind: teacherlist[i].Te_kind,
              te_auth: teacherlist[i].Te_isadmin == 0 ? "普通权限" : "所有权限",
              date: teacherlist[i].Te_datetime
            };
            telistdata[i] = item;
          }
          this.tableData = telistdata;
        });
    },
    //编辑
    handleEdit(index, row) {
      //this.$router.push('/coursemanage/editcourse',{params:{id:row.couid}});
      var id = row.te_id;
      this.$router.push({ name: "editteacherinfo", params: { id } });
    },
    //删除，物理删除
    handleDelete(index, row) {
      var id = row.te_id;
      this.$confirm("确定要删除选中的文件吗?", "提示").then(() => {
        this.$axios
          .delete("/Teacher/" + id)
          .then(json => {
            if (json.data == 1) {
              this.$message({
                message: "删除成功！",
                type: "success"
              });
              this.selectTeacher();
            }
          })
          .catch(error => {});
      });
    },
    goinsert() {
      this.isinput = true;
    },
    godelet() {
      this.isdelete = true;
    },
    //批量修改
    godeletupdete(){
      this.isupdate = true;
    },
    insertend() {
      this.isinput = false;
    },
    //批量删除
    deleteend() {
      this.isdelete = false;
    },
    //批量修改
    updateend(){
      this.isupdate = false;
    },

    //上传材料
    submitInsertUpload() {
      let list = document.getElementsByClassName(
        "el-upload-list__item is-ready"
      );
      if (list.length == 0) {
        alert("请选择需要上传的文件!");
        // this.$message({
        //   type: "warning",
        //   message: "请选择需要上传的文件"
        // });
        return;
      }
      this.$refs.uploadinsert.submit();
    },

    uploadInsertSectionFile(param) {
       const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var fileObj = param.file;
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);

      this.$axios
        .post("/Teacher/insert/v3", form, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(json => {
          if (json.data != "") {
            if (json.data == "OK") {
              alert("批量插入完成！");
              this.selectTeacher();
              // this.$message({
              //   type: "success",
              //   message: "批量插入完成！"
              // });
            }
            else{
              alert(json.data);
              //  this.$message({
              //   type: "error",
              //   message: json.data
              // });
            }
            this.$refs.uploadinsert.clearFiles();
             
          }
          else{
            alert("出现异常，请重试！");
          }
           loading.close();
        })
        .catch(error => {});
    },

    //上传材料
    submitDeleteUpload() {
      let list = document.getElementsByClassName(
        "el-upload-list__item is-ready"
      );
      if (list.length == 0) {
        alert("请选择需要上传的文件!");
        // this.$message({
        //   type: "warning",
        //   message: "请选择需要上传的文件"
        // });
        return;
      }
      this.$refs.uploadDelete.submit();
    },
     //批量修改
    submitupdateUpload(){
      let list = document.getElementsByClassName(
        "el-upload-list__item is-ready"
      );
      if (list.length == 0) {
        alert("请选择需要上传的文件!");       
        return;
      }
      this.$refs.uploadUpdate.submit();
    },
    //批量修改上传方法
    uploadupdateSectionFile(param){
      var fileObj = param.file;
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      this.$axios
        .post("/Teacher/Update/v3", form, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(json => {
          if (json.data != "") {
            if (json.data == "OK") {
              alert("批量修改完成！");
              this.currentPage = 1;
              this.selectTeacher();            
            }
            else{
              alert(json.data);            
            }
            this.$refs.uploadUpdate.clearFiles();
          }
          else{
            alert("出现异常，请重试！");

          }
        })
        .catch(error => {
          
        });
    },


    uploadDeleteSectionFile(param) {
      var fileObj = param.file;
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);

      this.$axios
        .post("/Teacher/delete/v3", form, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(json => {
          if (json.data != "") {
            if (json.data == "OK") {
              alert("批量删除完成！");
              this.currentPage = 1;
              this.selectTeacher();
              // this.$message({
              //   type: "success",
              //   message: "批量插入完成！"
              // });
            }
            else{
              alert(json.data);
              //  this.$message({
              //   type: "error",
              //   message: json.data
              // });
            }
            this.$refs.uploadDelete.clearFiles();
          }
          else{
            alert("出现异常，请重试！");

          }
        })
        .catch(error => {

        });
    }
  },
  computed: {
    totalNum() {
      return this.total;
    }
  },
  watch: {
    // 监听总条数,每次查询将当前页置为 1
    totalNum(val) {
      if (val == (this.currentPage - 1) * this.pageSize && val != 0) {
        this.currentPage -= 1;
        this.selectTeacher(this);
      }
    }
  }
};
</script>


<style scoped>
.locsty {
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
.editsty {
  padding: 3px;
  font-size: large;
}
.iconsty {
  color: #53b9fe;
  font-size: 22px;
}
.headstyle {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 20px;
}
.contentstyle {
  text-align: center;
  width: 90%;
  padding: 40px;
}
.selectsty {
  width: 155px;
}
/* 点击新建子级 */
.bulitContent {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2000;
}
.bulitBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* background-color:#d9d9d9; */
  background-color: #7f7f7f;
  /* rgba(217,217,217,0.x) */
  z-index: -10;
  opacity: 0.5;
}
.bulitContentDetail {
  background: #ffffff;
  width: 600px;
  height: 520px;
  margin: 0 auto;
  margin-top: 13%;
}
.bulitTitle {
  height: 40px;
  background: #e1e5f4;
  line-height: 40px;
  font-size: 18px;
  color: gray;
  padding: 0 10px;
  letter-spacing: 2px;
}
.bulitTitle span {
  margin-right: 70%;
}
.close {
  cursor: pointer;
}
.trainName,
.courseName {
  font-size: 20px;
  margin-top: 20px;
  text-align: left;
  padding-left: 20px;
}

.btnSure {
  width: 80px;
  background: #527bf1;
  cursor: pointer;
  padding: 6px 10px;
  color: white;
  margin-left: 260px;
}

.tableContent {
  text-align: center;
  margin: 30px;
  height: 300px;
  /*overflow-y:scroll;  */
}
.tableContent table {
  width: 100%;

  text-align: center;
  margin: auto;
  border: 1px solid #e5e5e5;
  margin-bottom: 25px;
  border-spacing: 0;
  border-collapse: collapse;
}
.tableContent table tr th {
  background: #e6f3f8;
  border: 1px solid #e5e5e5;
  height: 30px;
}
.tableContent table tr td {
  border: 1px solid #ffffff;
  height: 50px;
  font-size: 14px;
}
.tableContent table tr th input {
  vertical-align: middle;
}
.el-button{
  padding:12px 12px !important;
}
</style>

